<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="description" content="Your description goes here" />
	<meta name="keywords" content="your,keywords,goes,here" />
	<meta name="author" content="Your Name" />
	<link rel="stylesheet" type="text/css" href="andreas06.css" title="andreas06" media="screen,projection" />
	<title>andreas06 v2.0</title>
</head>

<body>
<div id="container">
	<a id="top"></a><p class="hide">Skip to: <a href="#nav">site menu</a> | <a href="#leftside">section menu</a> | <a href="#content">main content</a></p>

	<div id="sitename">
		<h1>andreas06: falling leaves</h1>
		<span>It is all about colors...</span>
	</div>

	<div id="nav">
		<ul>
			<li><a href="index.html">Front page</a></li>
			<li id="current"><a href="alternative.html">Alternative layout</a></li>
			<li><a href="photo.html">Photo layout</a></li>
			<li><a href="empty.html">Empty</a></li>
		</ul>
		<p class="hide"><a href="#top">Back to top</a></p>
	</div>
 
	<div id="wrap1">
		<div id="wrap2">

			<div id="topbox">
				<strong><span class="hide">Currently viewing: </span><a href="index.html">andreas06: Falling leaves</a> &raquo; <a href="alternative.html">Alternative layout</a></strong>
			</div>

			<div id="leftside">
				<p class="soft">Use the navigation tabs to read more about the template and to see alternative layouts and features.</p>
				<h1>Example menu:</h1>
				<p class="menublock">
				<a class="nav" href="#">First page</a><br class="hide" />
				<a class="nav sub" href="#">- Subpage 1</a><br class="hide" />
				<a class="nav sub" href="#">- Subpage 2</a><br class="hide" />
				<a class="nav sub" href="#">- Subpage 3</a><br class="hide" />
				<a class="nav" href="#">Second page</a><br class="hide" />
				<a class="nav sub" href="#">- Subpage 1</a><br class="hide" />
				<a class="nav sub" href="#">- Subpage 2</a><br class="hide" />
				<a class="nav sub" href="#">- Subpage 3</a><br class="hide" />
				<a class="nav" href="#">Third page</a><br class="hide" />
				<a class="nav" href="#">Fourth page</a><br class="hide" />
				<a class="hide" href="#top">Back to top</a>
				</p>
			</div>

			<div id="contentalt">
				<h1>Two columns only...</h1>
				<img src="img/gravatar-leaf.jpg" height="80" width="80" alt="Gravatar example" />
				<p class="intro">In some cases, the rightside column may not be needed. For example, if you want to publish long texts you may want to have longer text lines to enhance readability. This theme gives you the option to remove the right sidebar and resize the content column automatically!</p>
				<p>Since this can be changed for each page on your website, you can also mix the two layouts on your site and let some pages have two columns while others have three columns.</p>
				<p>The markup has a number of additional accessibility and navigation features that are only visible in no-CSS mode. Internal document navigation is supported, with skip-links at the top of the document and "Return to top" links in each menu and after each content section. The no-CSS mode also make the design work well even on text-based browsers (like Lynx) and on small screens like mobile phones or PDAs that doesn't support CSS very good. The design also works well even when images are disabled or removed! The layout will be the same and background colors will replace the images. No example is included, but if you download the zip, unpack it and rename the image folder, you will be able to see what it looks like.</p>

				<h2>Credit link?</h2>
				<p>If you decide to use this design, I kindly ask that you leave the "Design by Andreas Viklund" link in the footer. But there are no obligations, so if you want to remove it - just do it. However, if you remove the credits and use this design for commercial purposes, please consider making a symbolic donation through the PayPal link on my <a href="http://andreasviklund.com">website</a>. In any case, feel free to send me an e-mail with a link to the site where you have used the design - it is always fun to see how it is used and what changes have been made.</p>
				<p>Good luck with your new website!</p>
								
				<h1>Included styles</h1>
				<p>I have included a number of formatting styles to give you a flying start with your new design. Here are a few examples of included styles and how they can be used.</p>

				<p>List styles (unsorted, ordered, definition):</p>
				<ul>
					<li>Option 1</li>
					<li>Option 2</li>
					<li>Option 3</li>
				</ul>

				<ol>
					<li>First</li>
					<li>Second</li>
					<li>Third</li>
				</ol>

				<dl>
					<dt>FAQ question #1</dt>
					<dd>Answer to question #1.</dd>
					<dt>FAQ question #2</dt>
					<dd>Answer to question #2.</dd>
				</dl>

				<p>Regular text paragraphs can have
				<strong>strong words</strong> and
				<em>emphasised words</em> if wanted. Words can also be
				<span class="smallcaps">small caps</span>,
				<span class="soft">soft</span>, 
				<span class="sharp">sharp</span>, 
				<span class="small">small</span> or 
				<span class="large">large</span> - or a 
				<span class="small sharp">combination</span>
				<span class="soft large">of the <span class="smallcaps">values</span></span>.</p>

				<p>To add a visual content separator on your page, you can use a horizontal ruler (hr) like this:</p>
				<hr />
				<h1>h1 header</h1>
				<h2>h2 header</h2>
				<h3>h3 header</h3>
				<p><a href="#">Regular text link</a></p>
				<div class="box">This text is placed in a box!</div>
				<p class="hide"><a href="#top">Back to top</a></p>
			</div>
		</div>

		<div id="footer">
			<p>&copy; 2008 Your Name | Original design by <a href="http://andreasviklund.com/">Andreas Viklund</a></p>
		</div>
	</div>
</div>
</body>
</html>